<template>
  <div class="room-content">
    <Navbar :appTitle="appTitle" @ClickRight="ClickRight"/>

    <Search
        ref="topSearch"
        class="search"
        placeholder="出库单编号 | 物品名称"
        :isAdd="true"
        :isScreen="true"
        :isType="true"
        @onSearch="onSearch"
        @onScreen="onScreen"
        @newBuild="newBuild"
    >
    </Search>
    <search-tag ref="SearchTag" @getCategory="getCategory"></search-tag>
    <!--分页列表 -->
    <div class="listBox">
      <pageList
          :usedGetMethods="true"
          ref="pageList"
          :checkedShow="false"
          :columns="columns"
          :minLen="3"
          :listUrl="listUrl"
          @handleList="handleList"
      >
        <div slot="foot" slot-scope="{ item }" class="operateBox">
          <div
              class="delBtn"
              @click.stop="handleDelete(item)"
          >
            删除
          </div>
          <div
              class="pubBtn"
              @click.stop="handleEdit(item)"
              v-show="item.isArchive != 1&&!item.sourceId"
          >
            编辑
          </div>
          <div
              class="pubBtn"
              @click.stop="handleArchive(item)"
              v-show="item.isArchive != 1"
          >
            归档
          </div>
        </div>
      </pageList>
    </div>
  </div>
</template>
<script>
import Navbar from "@/components/navBar/navBar_right";
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import pageList from "@/components/pageList";
import {outboundOrderdelete} from "@/api/mobile";
import {Dialog} from "vant";
import {deleteShiftInfo, recordArchive} from "@/api/removeAndinventory";

export default {
  name: "outboundOrder",
  components: {
    Navbar,
    Search,
    pageList,
    SearchTag,
  },
  data() {
    return {
      appTitle: "出库单",
      listUrl:
          "/jksaas-produce/produce/inOutDocument/wmsWarehouseOperate/queryByPage", //出库单列表接口
      columns: {
        titleKey: "taskCode", //标题
        subtitleKey: null, //副标题
        content: [
          //内容
          {
            name: "业务类型",
            key: ["operateTaskTypeText"],
          },
          {
            name: "物品明细",
            key: ["goodsClassNum"],
          },
          {
            name: "物品数量",
            key: ["goodsNum"],
          },
        ],
      },
      keyword: "",
    };
  },
  beforeRouteLeave(to, from, next) {
    if (this.$refs.SearchTag.showSearchTag) {
      this.appTitle = this.$route.query.navTitle;
      this.$refs.SearchTag.showSearchTag = false;
      next(false);
    } else {
      next();
    }
  },
  created() {
  },
  mounted() {
    this.searchQuery();
  },
  methods: {
    // 搜索
    searchQuery(searchObj) {
      let params = {
        operateType: 2,
        type: 1,
        ...searchObj,
      };
      this.$refs.pageList.searchQuery(params);
    },
    // 编号查询
    onSearch(v) {
      this.keyword = v;
      let searchObj = {
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    // 更多查询页面
    onScreen() {
      this.appTitle = "更多筛选";
      this.keyword = this.$refs.topSearch.value;
      this.$refs.SearchTag.showModal(this.keyword);
    },
    getCategory(sureObj) {
      this.appTitle = "出库单";
      this.keyword = sureObj.keyword;
      this.$refs.topSearch.value = sureObj.keyword;
      this.searchQuery(sureObj);
    },
    // 新建
    newBuild() {
      this.$router.push({
        path: "/outboundOrderForm",
      });
    },
    // 删除
    handleDelete(e) {
      Dialog.confirm({
        title: "确定删除出库单吗？",
        // message:
        //   "出库单删除后，库存会同步增加，出库明细会同步删除，删除后不可恢复。",
        confirmButtonColor: "#2b85e4",
      })
          .then(() => {
            outboundOrderdelete({ids: e.id}).then((res) => {
              if (res.success) {
                this.$toast("出库单删除成功");
                this.searchQuery();
              } else {
                this.$toast(res.message);
              }
            });
          })
          .catch(() => {
          });
    },
    // 编辑
    handleEdit(e) {
      this.$router.push({
        path: "/outboundOrderForm",
        query: {
          id: e.id,
        },
      });
    },
    // 归档
    handleArchive(v) {
      Dialog.confirm({
        title: "确定归档吗？",
        message: "归档后状态不可恢复",
        confirmButtonColor: "#2b85e4",
      })
          .then(() => {
            recordArchive({
              ids: v.id,
              entityCode: "WAREHOUSE_OPERATE_OUT",
            }).then((res) => {
              if (res.success) {
                this.$toast(res.message);
                this.searchQuery();
              } else {
                this.$toast(res.message);
              }
            });
          })
          .catch(() => {
          });
    },
    // 出库单详情
    handleList(id, item, type) {
      if (type == "列表") {
        this.$router.push({
          path: "/outboundOrderDetail",
          query: {
            id: id,
          },
        });
      }
    },
    ClickRight() {
      this.$refs.SearchTag.showSearchTag = false;
      this.$router.push({
        path: "/application",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.delBtn{
  color: red;
  margin-right: 20px;
}
.search {
  position: fixed;
  top: 93px;
  z-index: 98;
  width: 100%;
}

.listBox {
  margin-top: 120px;
  overflow-y: hidden;
}

.room-content {
  height: 100vh;
  overflow-y: scroll;

  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;

    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }

    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
}

.operateBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding-right: 3px;
  font-size: 28px;
  font-weight: 500;
  color: #1890ff;
}

.pubBtn {
  margin-right: 20px;

  &:nth-last-child(1) {
    margin-right: 0;
  }
}


</style>
